import React from 'react';
import {Card, Typography} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import { connect } from 'dva';
import {FormattedMessage} from 'umi-plugin-react/locale';

// const CodePreview = ({children}) => (
//   <pre
//     style={{
//       background: '#f2f4f5',
//       padding: '12px 20px',
//       margin: '12px 0',
//     }}
//   >
//     <code>
//       <Typography.Text copyable>{children}</Typography.Text>
//     </code>
//   </pre>
// );
//
// export default () => (
//   <PageHeaderWrapper>
//     <Card>
//       <Typography.Text strong>
//         <span style={{color: '#1890ff'}}>-系统管理</span>
//       </Typography.Text>
//       <pre
//         style={{
//           background: '#f2f4f5',
//           padding: '12px 20px',
//           margin: '12px 0',
//         }}
//       >
//         <code>
//           <div style={{display:'grid'}}>
//             <span>--菜单管理</span>
//             <span>--角色管理</span>
//             <span>--用户管理</span>
//             <span>--主帐号管理</span>
//             <span>--子帐号管理</span>
//           </div>
//         </code>
//       </pre>
//       <Typography.Text
//         strong
//         style={{
//           marginBottom: 12,
//         }}
//       >
//         <span style={{color: '#1890ff'}}>-业务用户</span>
//       </Typography.Text>
//       <pre
//         style={{
//           background: '#f2f4f5',
//           padding: '12px 20px',
//           margin: '12px 0',
//         }}
//       >
//       </pre>
//       <Typography.Text
//         strong
//         style={{
//           marginBottom: 12,
//         }}
//       >
//         <span style={{color: '#1890ff'}}>-文件管理</span>
//       </Typography.Text>
//       <pre
//         style={{
//           background: '#f2f4f5',
//           padding: '12px 20px',
//           margin: '12px 0',
//         }}
//       >
//       </pre>
//       {/*<CodePreview> npm run fetch:blocks</CodePreview>*/}
//     </Card>
//     <p
//       style={{
//         textAlign: 'center',
//         marginTop: 24,
//       }}
//     >
//       Welcome
//     </p>
//   </PageHeaderWrapper>
// );


class Welcome extends React.Component {
  render() {
    const {currentUser} = this.props;
    console.log('welcome', currentUser);

    return <PageHeaderWrapper>
      <Card>

        {currentUser && currentUser.menuData &&
        currentUser.menuData.map((obj, index) =>
            <>
            <Typography.Text strong>
              <span style={{color: '#1890ff'}}>-{obj.name}</span>
            </Typography.Text>
            <pre
              style={{
                background: '#f2f4f5',
                padding: '12px 20px',
                margin: '12px 0',
              }}
            >
              {obj.children&&<code>
                <div style={{display: 'grid'}}>
                  {obj.children.map((sub, index)=><span>--{sub.name}</span>)}
                </div>
              </code>}
            </pre>
            </>
          )
        }
      </Card>
      <p
        style={{
          textAlign: 'center',
          marginTop: 24,
        }}
      >
        欢迎使用
      </p>
    </PageHeaderWrapper>
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Welcome);
